<template>
  <div>
    <i-row >
      <i-col span="12" i-class="col-class">
        <i-tab-bar :current="current" @change="handleChange">
          <i-tab-bar-item key="homepage" icon="homepage" current-icon="homepage_fill" title="主页"></i-tab-bar-item>
        </i-tab-bar>
      </i-col>
      <i-col span="12" i-class="col-class">
        <i-input :value="motto" placeholder="搜索"  icon="homepage" />
      </i-col>
    </i-row>

    <template v-if="page.list && page.list.length > 0">
      <i-row >
        <i-col span="24" i-class="col-class" v-for="item in page.list" :key="item.name">
          <i-row class="line-height-info">
            <i-col span="8">
              <img style="width:110%;height:150px;" :src="item.mainImg" />
            </i-col>
            <i-col span="16">
              <i-card :title="item.couponAmount +'\t\t\t\t\t\t￥'+ item.price">
                <view slot="content">
                  <span>{{item.name}}</span>
                  <a target="_blank" style="color:blue;">店铺名称：{{item.shopName}}</a>
                </view>
                <view slot="footer">
                  <p class="card-text mb-auto">优惠券：{{item.couponRest}} / {{item.couponCapacity}}</p>
                  <div class="mb-1 text-muted">有效期：{{item.startTime}} : {{item.endTime}}</div>
                </view>
              </i-card>
            </i-col>
            <i-col span="24">
              <i-button  size="small" @click="nav2Url(item.couponLink)" type="success">抢购</i-button>
              <!--<i-row>-->
                <!--<i-col span="12">-->
                  <!--<i-button  size="small" @click="nav2Url(item.couponLink)" type="info">￥ {{item.price}}</i-button>-->
                <!--</i-col>-->
                <!--<i-col span="12">-->
              <!--<i-button  size="small" @click="nav2Url(item.couponLink)" type="success">抢购</i-button>-->
                <!--</i-col>-->
              <!--</i-row>-->
            </i-col>
          </i-row>
          <i-divider color="#2d8cf0" lineColor="#2d8cf0"></i-divider>
        </i-col>
      </i-row>
      <i-page :current="page.number+1" :total="page.totalPages" @change="handleChange" mode="button">
        <view slot="prev">
          <i-icon type="return"></i-icon>
          上一页
        </view>
        <view slot="next">
          下一页
          <i-icon type="enter"></i-icon>
        </view>
      </i-page>
    </template>
    <template v-else>
      <h3 style="text-align: center;color: #00b0f6;margin-top: 20px;">暂无数据！</h3>
    </template>

  </div>
</template>

<script>
import card from '@/components/card'
import http from '@/api/http.js'

export default {
  data () {
    return {
      motto: '点击搜索',
      userInfo: {},
      ins:[1,2,3,4,5,6,7],
      current: 'homepage',
      page:{},
      size:5,
      num:0
    }
  },

  components: {
    card
  },
  mounted(){
    this.getPage(this.num, this.size);
  },
  methods: {
    getPage(num, size){
      if (!num) num = 0;
      if (!size)  size = 5;
      let that = this;
      http.getAllRebateGoods(num, size).then(r =>{
        that.page = r;
      });
    },
    getDetailInfo(id){
       if(!id) return;
      let that = this;

      http.getDetailInfo(id).then( d => {
        that.detail = d;
      })
    },
    nav2Url(link){
      let url = "/pages/detail/main?id=1&link="+encodeURIComponent(link);
      wx.navigateTo({url})
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    handleChange (e) {
      const type = e.target.type;
      if (type === 'next') {
        this.num = this.num + 1;
      } else if (type === 'prev') {
        this.num = this.num - 1;
      }
      if (this.num < 0){
        this.num = 0;
      }
      this.num = this.num > this.page.totalPages?this.page.totalPages:this.num;
      this.getPage(this.num, this.size)
    }
  },
}
</script>

<style scoped>
  .line-height-info{
    line-height: 1.5;
  }
</style>
